Day 07：測試排版、整理程式碼

17th鐵人賽

nanako77

2025-09-21 23:50:27

28 瀏覽

分享至

昨天我們完成了篩選的 UX（可切換、chips、清除），今天就來做全面檢查與整理！雖然看起來只是小修小補，但這一步會讓後面每一個功能都更省力。

1. 版面檢查

/* 調試用：加外框看排版，調完刪除 */
* { outline: 1px solid rgba(0,0,0,.02); } 
section, header, footer { outline: 1px dashed rgba(124,58,237,.25); }

2. 無障礙（a11y）快速加強

新增「跳到主內容」的跳躍連結、設定 aria-current、補充按鈕型態。

(a) 在 `<body>` 最上方加「跳到主內容」

<a class="skip-link" href="#main">跳到主內容</a>

把你的 <main> 加上 id="main"：

<main id="main"> … </main>

在 style.css 末尾加入（僅焦點時可見）：

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #111; color: #fff; padding: 8px 12px; border-radius: 8px;
}
.skip-link:focus { left: 12px; top: 12px; z-index: 1000; }

(b) 標示目前頁

在目前所在頁的導覽 <a> 加上 aria-current="page"（例如首頁）：

<li><a href="front.html" aria-current="page">首頁</a></li>

(c) 明確所有按鈕型態

找出所有 <button>，若屬於點擊事件、非表單送出，加上 type="button"，避免在表單內誤觸送出。

3. 語意與內容健檢

讓標題階層清晰、圖片替代文字完整、避免過多 <br>。

每頁只放一個 <h1>（你的 Logo/站名），區塊標題用 <h2>、卡片內標題用 <h3>。
圖片 alt 要寫得有意義（你已寫「xxx 封面」很不錯）。
盡量用 CSS 控制段落間距，少用 <br> 疊出空白。

4. 清理與歸檔（超省未來時間）

刪掉不再使用的程式與樣式、集中腳本。

刪 CSS：搜尋並刪除與舊購物站相關的類別（例如 .shop、.product、商品圖片尺寸）
刪 HTML：確定 front.html 不再有任何舊的 <img>（非卡片封面）

集中腳本：把頁面裡為了「平滑捲動」寫的內嵌 <script> 移到 js/app.js

// 放進 js/app.js
$(function(){
  $('#learn-more').on('click', function(e){
    e.preventDefault();
    $('html, body').animate({ scrollTop: $('#features').offset().top }, 800);
  });
});